﻿<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<div ng-controller="LocationCtrl">
  <!-- Simple dropdown -->
  <span class="dropdown" on-toggle="toggled(open)">
    <a href class="dropdown-toggle">
      Click me for a dropdown, yo!
    </a>
    <ul class="dropdown-menu">
      <li ng-repeat="choice in items">
        <a href>{{choice}}</a>
      </li>
    </ul>
  </span>

  <!-- Single button -->
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

  <!-- Split button -->
  <div class="btn-group" dropdown>
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle">
      <span class="caret"></span>
      <span class="sr-only">Split button!</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

  <hr />
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
    <button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
  </p>

</div>